<template>
    <h1 class="row-title">总页数 total 大于页码最大显示数 pager-count，此时无法全部显示</h1>
    <div class="row">
        <XiaoQuan-Pager
            :currentPage="currentPage1"
            :total="20"
            @currentChange="(page)=> currentPage1 = page"
        ></XiaoQuan-Pager>
    </div>
    <h1 class="row-title">总页数 total 小于等于页码最大显示数 pager-count，可以全部显示</h1>
    <div class="row">
        <XiaoQuan-Pager
            :currentPage="currentPage2"
            :total="5"
            @currentChange="(page)=> currentPage2 = page"
        ></XiaoQuan-Pager>
    </div>
    <h1 class="row-title">页码最大显示数 pager-count 是可以调整的</h1>
    <div class="row">
        <XiaoQuan-Pager
            :pagerCount="15"
            :currentPage="currentPage3"
            :total="12"
            @currentChange="(page)=> currentPage3 = page"
        ></XiaoQuan-Pager>
    </div>
    <h1 class="row-title">调整主题颜色</h1>
    <div class="row">
        <XiaoQuan-Pager
            :total="20"
            type="warning"
            :current-page="currentPage4"
            @current-change="(page) => (currentPage4 = page)"
        />
    </div>
    <div class="row">
        <XiaoQuan-Pager
            :total="20"
            type="danger"
            :current-page="currentPage5"
            @current-change="(page) => (currentPage5 = page)"
        />
    </div>
    <h1 class="row-title">调整大小</h1>
    <div class="row">
        <XiaoQuan-Pager
            :total="20"
            :current-page="currentPage6"
            size="small"
            @current-change="(page) => (currentPage6 = page)"
        />
    </div>
    <div class="row">
        <XiaoQuan-Pager
            :total="20"
            :current-page="currentPage7"
            @current-change="(page) => (currentPage7 = page)"
        />
    </div>
    <div class="row">
        <XiaoQuan-Pager
            :total="20"
            :current-page="currentPage8"
            size="large"
            @current-change="(page) => (currentPage8 = page)"
        />
    </div>
</template>

<script setup>
    import { ref } from "vue";
    const currentPage1 = ref(1);
    const currentPage2 = ref(2);
    const currentPage3 = ref(3);
    const currentPage4 = ref(1);
    const currentPage5 = ref(1);
    const currentPage6 = ref(1);
    const currentPage7 = ref(1);
    const currentPage8 = ref(1);

</script>

<style lang="scss" scoped>
    .row {
        width: 1000px;
    }
</style>